/* 歌单列表包装容器的样式 */
.playlist-container {
  display: grid; /* 使用 Grid 布局 */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 歌单项的最小宽度是 120px，1fr 表示自适应填充 */
  gap: 15px; /* 设置歌单项之间的间距 */
}

/* 歌单项的样式 */
.playlist-item {
  background-color: #f7f7f7; /* 一个轻微灰色的背景 */
  border-radius: 10px; /* 四个角的圆角 */
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  padding: 10px; /* 内边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 一些阴影 */
  transition: transform 0.2s; /* 添加 hover 效果的动画 */
  flex-direction: column;
}

/* 鼠标悬停时歌单项的样式 */
.playlist-item:hover {
  transform: scale(1.05); /* 使歌单项稍微放大 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 使阴影加深 */
}

.textov{
  display: -webkit-box; /* 使用 webkit 的多行文本截断方式 */
  -webkit-box-orient: vertical; /* 定义盒子的垂直布局 */
  -webkit-line-clamp: 2; /* 控制文本的行数为 2 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 添加省略号来表示被截断的文本 */
  max-height: 3em; /* 设置最大高度，假设一行文本高度为 1.5em */
  line-height: 1.5em; /* 设置行高，与 max-height 结合用来确定文本行数 */
}
